﻿<div data-ng-hide="authentication.isAuth">
    <div class="row">
        <div class="col-md-12">
            <h1>Welcome to Roomies</h1>
            <p class="text-justify">
                Roomies is a new application that want to help you improving your daily life within your collocation. <br />
                Get rid of the boring stuff. Roomies will remind you when to pay the rent, keep a list of the stuff you have and whom it belongs to.
                It will also help you deal with the bills, know who payed what and when, divide as you want to.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5" ng-controller="signupController">
            <form class="form-login" name="signupForm" role="form" novalidate>
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="form-login-heading">Sign up now</h2>
                    </div>
                </div>
                <div ng-class="{'has-error': signupForm.username.$invalid && signupFormSubmited}">
                    <div class="row">
                        <div class="col-md-12">
                            <label for="username"> User name: </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <input type="text" class="form-control" placeholder="Username" data-ng-model="registration.userName"
                                   name="username" id="username"
                                   required>
                        </div>
                    </div>
                </div>

                <div class="row"><div class="col-md-4">&nbsp;</div></div>

                <div ng-class="{'has-error': signupForm.password.$invalid && signupFormSubmited}">
                    <div class="row">
                        <div class="col-md-12">
                            <label for="password"> Password: </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <input type="password" class="form-control" placeholder="Password" data-ng-model="registration.password"
                                   name="password" id="password"
                                   required>
                        </div>
                    </div>
                </div>

                <div class="row"><div class="col-md-4">&nbsp;</div></div>

                <div ng-class="{'has-error': signupForm.confirmPassword.$invalid && signupFormSubmited}">
                    <div class="row">
                        <div class="col-md-12">
                            <label for="confirmPassword"> Confirm password: </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <input type="password" class="form-control" placeholder="Confirm Password" data-ng-model="registration.confirmPassword"
                                   name="confirmPassword" id="confirmPassword"
                                   required>
                        </div>
                    </div>
                </div>

                <div class="row"><div class="col-md-4">&nbsp;</div></div>

                <div class="row">
                    <div class="col-md-offset-8 col-md-4">
                        <button class="btn btn-lg btn-info btn-block" type="submit" data-ng-click="signUp(signupForm.$valid)">Submit</button>
                    </div>
                </div>

                <div class="row"><div class="col-md-4">&nbsp;</div></div>

                <div data-ng-show="signupFormSubmited" class="alert alert-danger">
                    <p>{{messageSignup}}</p>
                    <p data-ng-show="signupForm.username.$error.required && signupFormSubmited" class="help-block">The username is required.</p>
                    <p data-ng-show="signupForm.password.$error.required && signupFormSubmited" class="help-block">The password is required.</p>
                    <p data-ng-show="signupForm.confirmPassword.$error.required && signupFormSubmited" class="help-block">The confirmation password is required.</p>
                </div>
                <div data-ng-show="savedSuccessfully" class="alert alert-success">
                    <p>{{messageSignup}}</p>
                </div>
            </form>
        </div>

        <div class="col-md-offset-1 col-md-5" ng-controller="loginController">
            <form class="form-login" role="form" novalidate>
                <h2 class="form-login-heading">Login</h2>

                <label for="usernameLogin"> User name: </label>
                <input type="text" class="form-control" placeholder="Username" data-ng-model="loginData.userName"
                       name="usernameLogin" id="usernameLogin"
                       required autofocus>
                <div class="row"><div class="col-md-4">&nbsp;</div></div>
                <label for="passwordLogin"> Passord: </label>
                <input type="password" class="form-control" placeholder="Password" data-ng-model="loginData.password"
                       name="passwordLogin" id="passwordLogin"
                       required>
                <div class="row"><div class="col-md-4">&nbsp;</div></div>
                <div class="row">
                    <div class="col-md-offset-8 col-md-4">
                        <button class="btn btn-lg btn-info btn-block" type="submit" data-ng-click="login()">Login</button>
                    </div>
                </div>
                <div class="row"><div class="col-md-4">&nbsp;</div></div>
                <div data-ng-show="messageLogin" class="alert alert-danger">
                    {{messageLogin}}
                </div>
            </form>
        </div>
    </div>
</div>
<div data-ng-show="authentication.isAuth">

</div>